import 'package:car_music/src/modules/color/my_color_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_kit_dsp/flutter_kit_dsp.dart';
import 'package:flutter_kit_plus/flutter_kit.dart';

import '../../commont/button.dart';
import '../../tool/assets.dart';

class MyColor extends ColorPageDelegate<MyColorController> {
  late final CircularColorPicker _coloPicker;
  @override
  void onInit(BuildContext context) {
    super.onInit(context);
    Get.lazyPut(() => MyColorController());

    _coloPicker = CircularColorPicker(
        onChange: (p0) => controller.udpateColor(p0),
        pointImage: assets.alpha,
        cirulaImage: assets.rgb,
        showSelectPoint: true,
        padding: EdgeInsets.all(20));
  }

  ///其他组件
  Widget _container() {
    return Column(
      children: [
        ///
        Align(
            alignment: Alignment.bottomRight,
            child: Column(
                children: controller.nameStates.asMap().entries.map(($0) {
              int index = $0.key;
              return SizedBox(
                width: 200,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  spacing: 10,
                  children: [
                    Text(
                      controller.nameList[index],
                      style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                          color: controller.nameStates[index] ? Color_active_slider : Color_unActive_slider),
                    ),

                    ///模式开关
                    Transform.scale(
                      scale: 0.8,
                      child: Switch(
                          value: controller.nameStates[index],
                          onChanged: !controller.isOn.value ? null : (value) => controller.updateSwith(index, value)),
                    ),
                  ],
                ),
              );
            }).toList())),
        Flexible(flex: 10, child: _coloPicker),
        Flexible(child: Container()),

        ///颜色选择item
        Flexible(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: controller.hexList.asMap().entries.map(($0) {
            int index = $0.key;
            return Flexible(
                child: InkWell(
              onTap: () {
                int hex = controller.hexList[index];
                _coloPicker.kstate.setInitialColor(Color(hex));
                List<int> color = hex.bytes.sublist(1, 4);
                controller.udpateColor(color);
              },
              child: Image.asset(
                controller.colorList[index],
                width: 20,
                height: 20,
              ),
            ));
          }).toList(),
        )),
      ],
    );
  }

  ///on开关
  Widget _onWidget() {
    return Positioned(
      left: 20,
      top: 10,
      width: 50,
      height: 25,
      child: kMyTextButton(
          select: controller.isOn.value,
          name: controller.isOn.value ? 'OFF' : 'ON',
          onClick: (value) => controller.updateIson()),
    );
  }

  ///黑色半透明罩
  Widget _alphaWidget() {
    return Positioned(
        top: controller.isOn.value ? 100 : 0,
        left: 0,
        right: 0,
        bottom: 0,
        child: Container(color: Colors.black.withOpacity(0.5)));
  }

  @override
  Widget buildBody(BuildContext context, Widget child) {
    return Obx(() {
      return controller.isOn.value && controller.nameStates[1]
          ? Stack(children: [_container(), _onWidget()])
          : Stack(children: [_container(), _alphaWidget(), _onWidget()]);
    });
  }
}
